<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
	</head>
	<body>
		Email:<input type="text" id="inp"><br />
		姓名：<input type="text" id="xingM"><br />
		密码：<input type="password" id="txtPwd1"><br />
		重复密码：<input type="password" id="txtPwd2"><br />
	    <input type="submit" id="sub">
		<script type="text/javascript">
		//一.验证邮箱
			//1.获取节点
			var inp=document.getElementById("inp");
//			console.log(inp);//检测节点是否被获取
			var sub=document.getElementById("sub");
//			console.log(sub);//检测节点是否被获取
            var xingM=document.getElementById("xingM");
			//console.log(xingM);//检测节点是否被获取
			var txtPwd1=document.getElementById("txtPwd1");
			//console.log(txtPwd1);//检测节点是否被获取
			var txtPwd2=document.getElementById("txtPwd2");
			//console.log(txtPwd2);//检测节点是否被获取
            //2.邮箱需求：邮箱不能为空  邮箱要有@ 邮箱要有.
            
           // ③触发事件验证
            sub.onclick = function(){
	            //①先 获取input框里面的值 方法 节点.value
	            var str = inp.value;
	            //②js判断
//	            if(str.length == 0){//第二种  str == ""
//	            	alert("邮箱不能为空");
//	            }else{
//	            	alert("邮箱已输入");
//	            }
//	            //需求：邮箱要有@
//	            if(str.indexOf("@") == -1){
//	            	alert("邮箱要有@哦");
//	            }else{
//	            	alert("@有了");
//	            }
//	            //需求：邮箱要有.
//	            if(str.indexOf(".") == -1){
//	            	alert("邮箱要有点哦");
//	            }else{
//	            	alert("点有了");
//	            }
	            
	            if(str == " "){
	            	alert("邮箱不能为空");
	            }else if(str.indexOf("@") == -1 || str.indexOf(".") == -1){
	            	alert("邮箱要有@和点哦");
	            }else{
	            	alert("@和点有了");
	            }
          
       // 二.验证姓名 不能为空 不能为空
               var mvu = xingM.value;
               if(mvu == " "){
	            	alert("姓名不能为空");
	            }
               for(var i=0;i<mvu.length;i++){
               	var zifu = mvu.charAt(i);
               	if(zifu>=0){
               		alert("姓名中不能有数字");
               		break;//解决姓名中有多个数字会弹出多次提示的bug
               	}
              } 	
        //三.验证密码 密码长度不能小于六位  两次密码要一致       	
               	var mia1 = txtPwd1.value;
                var mia2 = txtPwd2.value;
               	if(mia1.length < 6){
               		alert("请输入六位以上的密码");
               	}else if(mia1 != mia2){
               		alert("两次密码不一致");
               	}
               
      }//事件结束符
		</script>
	</body>
</html>
